<template>
    <div class="page-container">
        <CustomModal :visible="visible" @onClose="onClose" />
        <div class="page-wrapper" :style="{ position:'relative', height:'560px', backgroundImage:`url(${Bg})` } ">
            <div class="page-content">
                <div class="text-container">
                    <div class="text">华翊合作伙伴全国火热招募中</div>
                    <div class="sub-text" style="margin:36px 0;">华翊合作伙伴全国火热招募中</div>
                    <el-button size="large" color="#335CFF" @click="visible=true">立即申请</el-button>
                </div>
            </div>
        </div>
        <div class="page-wrapper" style="height:auto; background:#fff;">
            <div class="page-content" style="padding-top:50px;">
                <div class="title">合作方式</div>
                <div class="flex-container" style="margin-bottom:100px;">
                    <div
                        v-for="(item, index) in data1"
                        :key="index"
                        class="flex-item"
                    >
                        <div><img :src="item.img" /></div>
                        <div style="font-size:24px; line-height:34px; color:#333333; ">{{ item.title }}</div>
                    </div>
                </div>
            </div>
        </div>  
        <!--  -->
        <div class="page-wrapper" style="height:auto; background:#F5F7FA; ">
            <div class="page-content" style="padding:50px 0 150px 0;">
                <div class="title" style="margin-bottom:50px;">合作优势</div>
                <div class="flex-container" style="gap:16px;">
                    <div
                        v-for="(item, index) in data2"
                        :key="index"
                        class="flex-item"
                        style="width:calc( 20% - 13px ); border-top:none; background:#fff; border-radius:12px; box-shadow: 0px 16px 32px -12px rgb(57, 58, 63, 0.15) ;"
                    >
                        <div><img :src="item.img" /></div>
                        <div style="margin:20px 0; font-size:24px; line-height:40px; color:#000; font-weight:bold; ">{{ item.title }}</div>
                        <div style="white-space:pre-line; text-align:center; color:#525866; line-height:24px; ">{{  item.content }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!--  -->
        <div class="page-wrapper" style="height:auto; background:#fff; ">
            <div class="page-content" style="padding:50px 0;">
                <div class="title" style="margin-bottom:50px;">合作流程</div>
                <div style="display:flex; align-items:center; justify-content:space-between; width:86%; margin:0 auto; ">
                    <div
                        v-for="(item, index) in data3"
                        :key="index"
                        style="display:flex; align-items:flex-start; justify-content:space-between;"
                    >
                        <div style="margin-right:16px;"><img :src="item.img" /></div>
                        <div>
                            <div style="font-size:36px; line-height:50px; color:#335CFF; font-weight:bold; ">{{ '0' + ( index + 1 ) }}</div>
                            <div style="font-size:20px; line-height:20px; color:#525866; font-weight:bold; ">{{  item.title }}</div>
                        </div>
                        <div v-if="index !== data3.length-1 " style="align-self:center; margin-left:60px;"><img :src="Arrow" /> </div>
                    </div>
                </div>
                <div style="margin:50px 0 30px 0; text-align:center; "><el-button type="primary" size="large" color="#335CFF" @click="visible=true">立即申请</el-button></div>
                <div style="font-size:16px; color:#525866; font-weight:bold; line-height:28px; text-align:center;">渠道合作电话咨询: 130 0000 0000</div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { watch, ref } from 'vue';
    import CustomModal from '@/components/CustomModal.vue';
    import { Right } from '@element-plus/icons-vue';
    import Bg from '../../../public/teamwork.png';
    import Icon1 from '../../../public/teamwork-icon-1.png';
    import Icon2 from '../../../public/teamwork-icon-2.png';
    import Icon3 from '../../../public/teamwork-icon-3.png';
    import Icon4 from '../../../public/teamwork-icon-4.png';
    import Icon5 from '../../../public/teamwork-icon-5.png';
    import Icon6 from '../../../public/teamwork-icon-6.png';
    import Icon7 from '../../../public/teamwork-icon-7.png';
    import Icon8 from '../../../public/teamwork-icon-8.png';
    import Icon9 from '../../../public/teamwork-icon-9.png';
    import Icon10 from '../../../public/teamwork-icon-10.png';
    import Icon11 from '../../../public/teamwork-icon-11.png';
    import Icon12 from '../../../public/teamwork-icon-12.png';
    import Icon13 from '../../../public/teamwork-icon-13.png';
    import Arrow from '../../../public/teamwork-icon-arrow.png';
    const data1 = [{ title:'项目合作', img:Icon1 }, { title:'商情转介', img:Icon2 }, { title:'产品合作', img:Icon3 }, { title:'定制开发', img:Icon4 }];
    const data2 = [
        { title:'丰厚返利', img:Icon5, content:'高回报返利体系\n高续费比例带来稳定营收\n季/年度优秀代理商激励' },
        { title:'体系化培训', img:Icon6, content:'定期线上产品培训\n定期线下训练营\n渠道经理定期走访辅导' },
        { title:'服务支持', img:Icon7, content:'7*12小时在线人工客服\n 1对1沟通\n专属客户沟通服务群'},
        { title:'市场支持', img:Icon8, content:'产品画册、折页等物料\n项目方案支持\n拓客话术等销售资料'},
        { title:'驻地支持', img:Icon9, content:'线下交流和沙龙\n运营能力培训服务\n市场销售培训服务'}
    ];
    const data3 = [ { title:'提交申请', img:Icon10 }, { title:'审核资料', img:Icon11 }, { title:'洽谈合作', img:Icon12 }, { title:'签约合作', img:Icon13 } ];
    const visible = ref(false);
    const onClose = ()=>{
        visible.value = false;
    } 
</script>
<style scoped>
    .flex-container {
        display:flex;
        flex-wrap:wrap; 
        gap:24px; 
    }
    .flex-container .flex-item {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        width:calc( 25% - 18px );
        height:327px;
        background:#f5f7fa;
        border-radius:8px;
        border-top:8px solid #3471ff;;
    }
    
</style>